// hook
import { useState, useEffect} from 'react'
// 样式
import '../assets/css/detail.css'
// 组件
import Top from '../components/top'
// hook
import { useLocation, Link, useNavigate} from 'react-router-dom'
// 接口
import { goodsDetail, Cartadd } from '../request/app'
function GoodsDetail() {
    // useNavigate 编程式导航
    const Navigate = useNavigate()
    // state 获取参数
    const { state } = useLocation()
    // 初始 state
    const [nav, setNav] = useState([
        {
            id: 1,
            con: '商品'
        },
        {
            id: 2,
            con: '评价'
        },
        {
            id: 3,
            con: '详情'
        },
        {
            id: 4,
            con: '推荐'
        }
    ])
    const [shop, setShop] = useState([
        {
            id: 1,
            img: require('../assets/img/detail/dianpu.png')
        },
        {
            id: 3,
            img: require('../assets/img/detail/gowuche.png')
        }, {
            id: 2,
            img: require('../assets/img/detail/kefu.png')
        }
    ])
    const [imgs, setImgs] = useState([])
    // uid
    const [xiaou,setXiaou] = useState(JSON.parse(sessionStorage.getItem('xiaou')) )
    // 一挂载就调用接口
    useEffect(() => {
        goodsDetail({
            id: state.id
        })
            .then(res => {
                console.log(res, '商品详情响应');
                // console.log(res.list[0]);
                if (res.code == 200) {
                    setImgs([...res.list])
                }

            })
    },[])
    // 点击返回上一页
    const cliTop = () => {
        Navigate(-1)
    }
    // 点击跳转订单页
    const cliIndent = () => {
        Navigate('/indent')
        sessionStorage.setItem("goodsDetail", JSON.stringify(imgs))
    }
    // 加入购物车事件
    const cliCart = () => {
        if (xiaou) {
            //调用 添加购物车接口
            Cartadd({
                uid: xiaou.uid,
                type: state.type?state.type:1,
                goodsid: state.id,
                num: 1
            }).then((res) => {
                console.log(res, '购物车添加');
                if (res.code == 200) {
                    // 跳转
                    Navigate('/index/cart')
                }
            })
        } else {
            // 跳转
            Navigate('/login')
        }
        
    }
    return (
        <div className="De_box">
            {/* 头部 */}
            <div className='top'>
                {/* 组件 */}
                <Top />
                <div className='top_om'>
                    <p onClick={() => cliTop()}>&lt;</p>
                    商品详情
                </div>
            </div>
            <div className="De_header">
            </div >
            {/* 身体 */}
            <div className="De_body">
                {/* 身体 （上部分）*/}
                <div className="D_D_top">
                    {
                        nav.map(item => {
                            return (
                                <span key={item.id}> {item.con}</span>
                            )
                        })}
                </div>
                {/* 身体 （中部分）*/}
                <div className="D_D_center" >
                    {
                        imgs.map(item => {
                            return (
                                <div key={item.id} >
                                    <div className="D_D_C_top" >
                                        <img src={item.img} alt="" />
                                        <span>8/8</span>
                                    </div>
                                    <div className="D_D_C_center">
                                        <img src={require('../assets/img/detail/detail_2.png')} alt="" className="imgs1" />
                                        <div className="big_box">
                                            <div className="small fl clearfix">
                                                <span className="S_s fl clearfix">限时</span>
                                                <div className="S_d1 fl clearfix">
                                                    <span>￥{item.price}</span>
                                                    <s>￥ {item.market_price}</s>
                                                </div>
                                                <div className="S_d2 fr clearfix">
                                                    <span className="iconfont icon-shoucang"></span>
                                                    <span>收藏</span>
                                                </div>
                                            </div>

                                            <p>{item.goodsname}</p>
                                            <p>{item.description}</p>
                                            <p>11.11限时299元起</p>
                                            <p>此商品于2020-11-11,00点结束闪购特卖闪购专场   <span className="fr clearfix">查看<i className="iconfont icon-gengduo1"></i></span></p>
                                        </div>
                                    </div>
                                    <div className="D_D_C_bottom">
                                        <p>分期 <span>可选3/6/12期</span></p>
                                    </div>
                                </div>
                            )
                        })}
                </div>
            </div>
            {/* 底部 */}
            <div className="De_footer">
                <div className="D_F_top" >
                    <div className="D_f_T_right">
                        {
                            shop.map(item => {
                                return (
                                    <img src={item.img} alt="" key={item.id} />
                                )
                            })}
                    </div>
                    {/* {
                        imgs.map(item => {
                            return ( */}
                    <div className="D_f_T_left">
                        <div onClick={() => cliCart()}>
                            加入购物车
                        </div>
                        <div onClick={() => cliIndent()}>
                            立即购买
                        </div>
                    </div>
                    {/* ) */}
                    {/* })
                    } */}

                </div>
            </div>

        </div >
    )
}
export default GoodsDetail